<template>
	<div class='toc_IM_component_frame'>
		<div class='toc_IM_header'>
			<span style='display: inline-block;position: absolute; left: 10px;' @click="close">
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span>
			画板
		</div>
		<div class='toc_IM_Canvas_frame'>
			<canvas id="toc_IM_Canvas"></canvas>
			<div class='toc_IM_Canvas_panel'>
				<label class='toc_IM_common_label'>
					<span>画笔颜色:</span>
					<select class='toc_IM_common_select' id='toc_IM_Canvas_color'>
						<option value="black">黑色</option>
						<option value="red">红色</option>
					</select>
				</label>
				<label class='toc_IM_common_label'>
					<span>画笔大小:</span>
					<select class='toc_IM_common_select' id='toc_IM_Canvas_size'>
						<option v-bind:value="n" v-for ='n in 9'>{{n}}</option>
					</select>
				</label>
			</div>
			<!--<div class='toc_IM_floating_btn' id='toc_IM_floating_btn'>
			  	<div class='toc_IM_floating_btn_childItem'>
			  		
			  	</div>
			 	<div class='toc_IM_floating_btn_childItem'>
			 		
			 	</div>
			 	<div class='toc_IM_floating_btn_childItem'>
			 		
			 	</div>
			 	<div class='toc_IM_floating_btn_childItem'>
			 		
			 	</div>
			  	<div class='main_btn'>
			   		<div class='main_btn_content' id='ss_toggle' data-rot='180'>
			      		<div class='circle'></div>
			      		<div class='bar'></div>
			    	</div>
			  	</div>
			</div>-->	
		</div>
	</div>
</template>

<script>
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import toc_IM_CanvasController from '@/assets/scripts/toc_IM_CanvasController.js'
	export default {
	  	name: 'canvas',
	  	props: ['componentsData'],
	  	data(){
		    return {
		    	imgConfig:imgConfig  	
		    }
		},
		mounted(){
			toc_IM_CanvasController.init()
			
		},
		methods:{
			close(){
	  			this.$emit('emit-components',null);
		  	}
		}
	}
</script>

<style>
	div.toc_IM_Canvas_content{
	position: relative;
	top:0;
	bottom: 0;
	left: 0;
	right:0;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}
div.toc_IM_Canvas_frame{
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	height: calc(100% - 50px);
	z-index: 4;
	background: #fff;
}

div.toc_IM_Canvas_frame canvas#toc_IM_Canvas{
	-webkit-user-select: none;
	position: relative;
}
div.toc_IM_Canvas_frame div.toc_IM_Canvas_panel{
	position: relative;
	border-top: 1px #ccc solid;
	width: 100%;
	height: 50px;
	background: #FFF;
	padding: 5px;
	line-height: 50px;
}

</style>